<template>
  <section>
    <main>
      <div class="pink">辅导记录</div>
    <div class="model">
      <div class="body">
        <div class="header"><span class="title">基本信息</span></div>
        <div class="content">
          <el-form ref="form" :model="form" label-width="80px">
            <el-col :span="11">
              <el-form-item label="报修人">
                <el-input v-model="repairName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="联系电话">
                <el-input v-model="repairPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="故障类别">
                <el-select v-model="typeName" @change="lChange">
                  <el-option v-for="(item, key) in tnList" :label="item" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="楼层">
                <el-input v-model="buildingName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="详细地点">
                <el-input v-model="repairPlace"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="故障描述">
                <el-input type="textarea" v-model="RankSelect" placeholder="请选择" :rows="6"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <div class="upladeImg">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :multiple='true'
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :auto-upload='false'>
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" :modal-append-to-body="false" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="scent_btn">
                <button class="btn btn-danger" @click="pushAll">提交</button>
              </div>
            </el-col>
          </el-form>
        </div>
      </div>
    </div>
    </main>
  </section>
</template>

<script>
export default {
  data () {
    return {
      archa: [],
      tnList: [],
      repairName: null,
      repairPhone: null,
      typeName: null,
      buildingName: null,
      repairPlace: null,
      faultDesc: null,
      form: {
        name: null,
        grade: null,
        grademsg: [{
          value: '1',
          label: '一年级'
        },
        {
          value: '2',
          label: '二年级'
        }],
        class: null,
        classmsg: [{
          value: '1',
          label: '一班'
        },
        {
          value: '1',
          label: '二班'
        }],
        course: null,
        time: null,
        situation: null
      },
      dialogImageUrl: null,
      dialogVisible: false
    }
  },
  mounted () {
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    this.$http.post('http://119.23.36.128:8020/yxt-web/faultRepair/type/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        let asdf = []
        for (var i = 0; i < response.data.data.rows.length; i++) {
          asdf[i] = response.data.data.rows[i].typeName
        }
        this.tnList = asdf
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  },
  methods: {
    lChange () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post('http://119.23.36.128:8020/yxt-web/faultRepair/type/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          console.log(this.typeName)
          if (this.typeName === 0) {
            this.archa = response.data.data.rows[0]
          } else if (this.typeName === 1) {
            this.archa = response.data.data.rows[1]
          } else if (this.typeName === 2) {
            this.archa = response.data.data.rows[2]
          } else if (this.typeName === 3) {
            this.archa = response.data.data.rows[3]
          } else if (this.typeName === 4) {
            this.archa = response.data.data.rows[4]
          } else if (this.typeName === 5) {
            this.archa = response.data.data.rows[5]
          } else {
            this.archa = null
          }
          console.log(this.archa)
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlePreview (file) {
      console.log(file)
    },
    pushAll () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'fault/repair/register', {
        repairName: this.repairName,
        repairPhone: this.repairPhone,
        buildingName: this.buildingName,
        repairPlace: this.repairPlace,
        faultDesc: this.faultDesc,
        attachmentList: [],
        repaireId: this.archa.id,
        repaireName: this.archa.repairName,
        repairType: this.archa.typeName
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.$router.push('/category')
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style scoped>
  /*.el-textarea__inner
  {
    position: relative; left: 7%; top: -32px;
    width: 80%;
  }*/
  .scent_btn
  {
    position: relative;
    height: 80px;
  }
  .scent_btn button
  {
    position: absolute; left: 38%; top: 20px;
  }
  .el-upload--picture-card
  {
    /*margin-left: 16%; */
    margin-top: 40px;
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  }
</style>
<style lang="less" scoped>
@import '/static/css/material-dashboard.css';
main
{
  position: relative;
  .pink{
      width: 104px;
      height: 64px;
      position: absolute;
      left: 3%;
      top: -20px;
      background: #E12C6C;
      border-radius: 4px;
      text-align: center;
      line-height: 70px;
      color: #fff;
      z-index: 2;
    }
  .model{
    width: 98%;
    background: #FFF;
    margin-left: 1%;
    margin-top: 60px;
    border-radius: 5px;
    padding-top: 10px;
    overflow: hidden;
    .header{
      width: 98%; height: 22px;
      border-bottom: 1px solid #ccc;
      padding: 30px 0 10px 0;
      margin-left: 0%;
      margin-bottom: 10px;
      .title{
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 5px 7px 5px;
        margin-left: 0;
      }
    }
    .body{
      padding: 40px 0 10px 11%;
      span{
        margin-left: 4%;
        display: inline-block;
        width: 64px;
        text-align: right;
      }
      span:first-child{
        margin-left: 0;
      }
      .select{
        width: 10%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .content{
        width: 100%;
        div[data-v-75715d0b]
        {
          line-height: 50px;
        }
        .left{
          width: 30%;
          display: inline-block;
          padding: 10px 0;
        }
        .bigger
        {
          width: 100%;
        }
        .right{
          width: 30%;
          display: inline-block;
          padding: 10px 0;
          margin-left: 28%;
        }
        .bottom{
          padding: 10px 0;
          .text{
            width: 68%;
          }
        }
        .text{
          border: 0;
          border-bottom: 1px solid #D7D7D7;
        }
      }
    }
  }
}
.upladeImg{
  min-height: 163px;
  margin-left: 80px;
}
</style>
